<template>
  <div>
      <div v-if="arr.length">
          <div v-for="(item,index) in arr" class="wrap" :key="index" @click="goDeatil(item.id)">
                <div class="left">
                  <img v-lazy=item.img alt="">
                </div>
                <div class="center">
                     <h4>{{item.title}}</h4>
                     <p>{{item.cishu}}人想看</p>
                     <p>主演：{{item.name}}</p>
                     <p>今日播放了{{item.score}}场次</p>
                </div>
                <div class="right">
                     <div class="reight-btn">预售</div>
                </div>
          </div>
      </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Lazyload } from 'vant';
Vue.use(Lazyload);
import {showMixin} from "../mixins"
import axios from "../utils/axios"
// 组件里定义得变量要比mixins的权重高
export default {
   data(){
      return {
        show:"zhaozhihao",
        arr:[]
      }
   },
   mounted(){
       axios.get("/list").then(res=>{
         console.log(res.data);
         this.arr = res.data
       })
   },
   methods:{
     goDeatil(id){
       // router-link 一般用于tabber
       //  事件
       console.log(id);
       // 动态路由得方式跳转详情
      //  this.$router.push("/detail/" + id)
      this.$router.push(`/detail/${id}`)
     }
   },
   mixins:[showMixin]
}
</script>

<style>
   .wrap {
     width: 100%;
     height: 200px;
     background: rgba(204, 204, 204, 0.87);
     margin-bottom: 20px;
     display: flex;
   }
   .left {
     flex:4;
    display: flex;
    align-items: center;
   }
   .center {
     flex: 6;
   }
   .right {
     flex: 2;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   .reight-btn {
      width: 50px;
      height: 30px;
      line-height: 30px;
      text-align: center;

      background: yellow;
      border-radius: 20px;
   }
   p {
     margin-top: -10px;
   }
   h4 {
     margin-top: 40px;
   }

</style>